<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
1. 计算属性
  在computed属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算
-->
<div id="demo">
    姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
    名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
    <!--fullName1是根据fistName和lastName计算产生-->
    姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
    姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
    姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

    <!-- 计算属性有缓存，多次读取只执行一次getter -->
    <p>{{fullName1}}</p> 
    <p>{{fullName1}}</p>
 
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
  <script>
    Vue.config.productionTip = false
     const vm=new Vue({
       el:'#demo',
       data:{
          firstName:'A',
          lastName:'B',
          fullName2:'A-B'
       },
      // 计算属性
      
     computed: {
         fullName1(){//getter
           return this.firstName+'-'+this.lastName
         },
         fullName3:{
            get(){
              return this.firstName+'-'+this.lastName
            },
            set(value){
              //更新firstName和lastName
              const names = value.split('-')
              this.firstName = names[0]
              this.lastName = names[1]
            }
         }
       },

    //当firstName的值发生改变时调用
     watch: {
      firstName:function(value){
        //更新fullName2
        this.fullName2=value+'-'+this.lastName
      }
    },

     })
     //监视lastName
     vm.$watch('lastName',function(value){
        //更新fullName2
        this.fullName2=this.firstName+'-'+value
     })
     /*
      1.vue控制的所有回调的this都是vm/组件对象
      2.vue给vm定义一些与data中的属性对应的属性
        同名
        getter方法:当通过vm.xxx读取属性值时，读取data对象中同名的属性的值
        setter方法:当通过vm.xxx=value指定新的值时，值就保存data中对应的属性上
      数据代理：vm._data.xxx===>vm.xxx 通过vm代理对vm内部的data对象的属性的操作(读/写)
      3.什么时候使用计算属性？
        如果要显示的数据可以根据现有的数据计算产生
     */

  </script>
</body>
</html>